<template>
  <h1>个人简历练习</h1>
  <table border="1">
    <tr>
      <td>照片：</td>
      <td><img :src="persion.imgUrl" width="100px"></td>
    </tr>
    <tr>
      <td>姓名：</td>
      <td>{{persion.name}}</td>
    </tr>
    <tr>
      <td>年龄：</td>
      <td>{{persion.age}}</td>
    </tr>
    <tr>
      <td>好友：</td>
      <td>
        <ul>
          <li v-for="fName in persion.friends">{{fName}}</li>
        </ul>
      </td>
    </tr>
  </table>
  <button @click="loadData">加载一下</button>
</template>

<script setup>
//准备一个空的persion对象
import {ref} from "vue";

const persion=ref(
    {name:"",age:"",imgUrl:"",friends:[]}
)

const loadData=()=>{
  persion.value={
    name:"果冻",
    age:"22",
    imgUrl:"guodong.jpg",
    friends:[
      "张三",
      "张三"
    ]
  }
}
</script>

<style scoped>

</style>